<!-- templates/view_operation_logs.html -->
{% extends 'base.html' %}

{% block content %}
<h2 class="page-title">操作日志</h2>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>日志ID</th>
            <th>管理员姓名</th>
            <th>操作类型</th>
            <th>详细内容</th>
            <th>时间</th>
        </tr>
    </thead>
    <tbody>
        {% for log in logs %}
        <tr>
            <td>{{ log.LogID }}</td>
            <td>{{ log.AdminID.Name }}</td>
            <td>{{ log.Operation }}</td>
            <td class="operation-details" style="text-align: left;">
                {% with log.Details|safe as details %}
                <span class="short-text">{{ details|slice:":10" }}{% if details|length > 10 %}...{% endif %}</span>
                <span class="full-text" style="display: none;">{{ details }}</span>
                {% endwith %}
                {% if log.Details|length > 10 %}
                <a href="#" class="toggle-more" onclick="toggleDetails(this); return false;">查看更多</a>
                {% endif %}
            </td>
            <td>{{ log.Timestamp }}</td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="5">暂无操作日志</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 分页导航 -->
<nav aria-label="Page navigation">
    <ul class="pagination">
        {% if logs.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ logs.previous_page_number }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {% endif %}

        {% for num in logs.paginator.page_range %}
        {% if logs.number == num %}
        <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
        {% elif num > logs.number|add:'-5' and num < logs.number|add:'5' %} <li class="page-item"><a class="page-link"
                href="?page={{ num }}">{{ num }}</a></li>
            {% endif %}
            {% endfor %}

            {% if logs.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ logs.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            {% endif %}
    </ul>
</nav>

<div class="mt-3">
    <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary">返回管理员主页</a>
</div>

<style>
    /* Optional styling for better UX */
    .operation-details {
        white-space: nowrap;
        /* Prevent wrapping */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .operation-details .full-text {
        white-space: normal;
        /* Allow wrapped text for full content */
    }

    .toggle-more {
        color: blue;
        cursor: pointer;
        text-decoration: underline;
    }
</style>

<script>
    // 选择所有API Keys
    document.getElementById('select-all-keys')?.addEventListener('click', function () {
        var checkboxes = document.getElementsByName('key_ids');
        for (var checkbox of checkboxes) {
            checkbox.checked = this.checked;
        }
    });

    function toggleDetails(link) {
        const cell = link.closest('td');
        const shortText = cell.querySelector('.short-text');
        const fullText = cell.querySelector('.full-text');
        const isExpanded = fullText.style.display === 'inline';

        if (isExpanded) {
            // Collapse to short text
            fullText.style.display = 'none';
            shortText.style.display = 'inline';
            link.textContent = '查看更多';
        } else {
            // Expand to full text
            fullText.style.display = 'inline';
            shortText.style.display = 'none';
            link.textContent = '收起';
        }
    }
</script>
{% endblock %}